<template>
  <div>
    <button>RoundSecond</button>
    <h2>v-for 和 v-if</h2>
    <ElButton type="primary">{{ fruits[0] }}</ElButton>
    <ElButton type="primary">{{ fruits[1] }}</ElButton>
    <ElButton type="primary">{{ fruits[2] }}</ElButton>
    <!-- [11,33,44]  element e  下标 index i -->
    <!-- vfor 循环作用在标签上 帮你引入了两个变量 局部作用域变量 -->
    <!-- vfor 循环作用在标签上 让该标签以及其子标签出现0到n次 -->
    <br />
    <ElButton v-for="(e, i) in fruits" :key="i" type="warning">
      {{ fruits[i] }}__{{ e }}__
      <div>x{{ e }}x</div>
    </ElButton>
    <ul>
      <li v-for="(e, i) in people" :key="i">
        <button>{{ e.name }}</button>
        <span>{{ e.age }}</span>
      </li>
    </ul>
    <table>
      <thead>
        <tr>
          <th>名字</th>
          <th>年龄</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(e, i) in people" :key="i">
          <td>{{ e.name }}</td>
          <td>{{ e.age }}</td>
        </tr>
      </tbody>
    </table>
    <ElTable :data="people">
      <ElTableColumn label="姓名" prop="name"></ElTableColumn>
      <ElTableColumn label="年龄" prop="age"></ElTableColumn>
    </ElTable>
    <ElButton type="danger" @click="addPerson()">添加一个人</ElButton>
  </div>
</template>
<script lang="ts">
export default {
  name: 'RoundSecond',
  props: {
    sampleP: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      sampleD: 'value',
      fruits: ['apple', 'banana', 'orange'],
      people: [
        { name: 'zhangsan', age: 11 },
        { name: 'lisi', age: 14 },
        { name: 'wangwu', age: 49 }
      ]
    }
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
  },
  created() {},
  mounted() {},
  methods: {
    // sampleM() {},
    addPerson() {
      const target = {
        name: 'zhaoliu',
        age: 100
      }
      this.people.push(target)
      console.log(this.people)
    }
  },
  watch: {
    // sampleP(n, o) {},
  }
}
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
